<template>
  <div class="feedback-page">
    <h2>用户反馈</h2>
    <form @submit.prevent="validateFeedback">
      <div class="form-group">
        <label for="name">用户名</label>
        <input type="text" id="name" v-model="feedback.fname" placeholder="请输入用户名" />
      </div>
      <div class="form-group">
        <label for="email">电子邮件地址</label>
        <input type="email" id="email" v-model="feedback.femail" placeholder="请输入电子邮件地址" />
      </div>
      <div class="form-group">
        <label for="subject">反馈主题</label>
        <input type="text" id="subject" v-model="feedback.fsubject" placeholder="请输入反馈主题" />
      </div>
      <div class="form-group">
        <label for="message">详细反馈内容</label>
        <textarea id="message" v-model="feedback.fmessage" placeholder="请输入详细反馈内容"></textarea>
      </div>
      <button type="submit" @click="submitFeedback">提交反馈</button>
    </form>
  </div>
</template>

<script setup>
import { ref ,onMounted} from 'vue'
import UserFeedbackVue from '@/views/user/UserFeedback.vue'
import { ElMessage } from 'element-plus'
import { feedbackService } from '@/api/feedback.js';
import useUserInfoStore from '@/stores/userInfo.js'
const userInfoStore = useUserInfoStore();
import request from '@/utils/request.js'
const feedback = ref({
  name: '',
  email: '',
  subject: '',
  message: ''
})
// 自动填充用户信息
onMounted(() => {
  const feedbackForm = document.querySelector('.feedback-page');
  if (feedbackForm) {
    console.log('Form is mounted');
  } else {
    console.error('Form is not mounted');
  }
});
// 表单校验规则
const validateFeedback = () => {
  if (!feedback.value.fname) {
    ElMessage.error('用户名不能为空');
    return false;
  }
  if (!feedback.value.femail || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(feedback.value.femail)) {
    ElMessage.error('请输入正确的电子邮件地址');
    return false;
  }
  if (!feedback.value.fsubject) {
    ElMessage.error('反馈主题不能为空');
    return false;
  }
  if (!feedback.value.fmessage) {
    ElMessage.error('反馈内容不能为空');
    return false;
  }
  return true;

}
const submitFeedback = async () => {
  try {
    const response = await feedbackService(feedback.value); // 传递 feedback 数据
    ElMessage.success('反馈提交成功');
    console.log('反馈提交成功:', response.data);
  } catch (error) {
    ElMessage.error('反馈提交失败');
    console.error('反馈提交失败:', error);
  }
};
</script>

<style scoped>
.feedback-page {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 16px;
}

button {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #409eff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #66b1ff;
}
</style>